<template>
	<view class="box">
		<!-- #ifdef MP-WEIXIN -->
		<view class="wrap" :style="{height:bottom*1.2+'px',lineHeight:bottom*1.5+'px',background:bgc}">
			<view class="leftMenu" :style="{top:top+'px',width:width+'px',height:height+'px',lineHeight:height+'px',left:'calc(100% - '+right+'px)'}"
			 v-if="showMenu">
				<text class="iconfont icon-zuojiantou" @tap="back()"></text>
				<text class="iconfont icon-tubiaozhizuo-"></text>
				<text class="iconfont icon-shouye" @tap="toHome()"></text>
			</view>
			<view class="mid" :style="{color: color,top:top+'px',height:height+'px'}">
				<text class="text-bold text-shadow">{{title}}</text>
			</view>
		</view>
		<!--  是否沉侵 ↓  -->
		<view :style="{height:bottom*1.2+'px'}" class="block" v-if="!immerse"></view>
		<!-- #endif -->

		<!-- #ifdef H5 -->
		<view style="height: 25px;" class="block" :style="{background:bgc}"></view>
		<!-- #endif -->
	</view>


</template>

<script>
	export default {
		data() {
			return {
				bottom: '',
				top: '',
				height: '',
				width: '',
				right: ''
			};
		},
		//默认沉侵 ['title', "showMenu", "immerse", 'color'],
		props: {
			title: {
				type: String,
				default: '连凯是傻逼'
			},
			showMenu: {
				type: Boolean,
				default: true
			},
			immerse: {
				type: Boolean,
				default: false
			},
			color: {
				type: String,
				default: 'black'
			},
			bgc: {
				type: String,
				default: 'rgba(0,0,0,0)'
			}
		},
		created() {
			// #ifdef MP-WEIXIN
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.bottom = menuButtonInfo.bottom;
			this.top = menuButtonInfo.top;
			this.height = menuButtonInfo.height;
			this.width = menuButtonInfo.width;
			this.right = menuButtonInfo.right;
			// #endif		
			//const mobileInfo = uni.getSystemInfoSync();		
			// console.log('胶囊按钮信息', menuButtonInfo)
			//console.log('手机设备信息', mobileInfo)
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			toHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100%;
		font-size: 32rpx;
		color: black;
		text-align: center;
		position: fixed;
		z-index: 100;

		.mid {
			font-size: 30rpx;
			position: absolute;
			width: 40%;
			left: 30%;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				// 单行省略下不能开启弹性盒子
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		.leftMenu {

			position: absolute;
			background-color: rgba($color: #000000, $alpha: 0.3);
			border-radius: 60rpx;
			color: white;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			//阴影当边框可以不改变元素大小
			box-shadow: 0 0 1px 1px rgb(217, 217, 217);

			.iconfont {
				font-size: 40rpx;
			}
		}


	}

	.block {
		width: 100%;
	}
</style>
